<template>
  <div class="reports">
    <a-page-header
      title="营运报表"
      sub-title="营运数据分析报表"
    />

    <a-row :gutter="16">
      <a-col :span="8" v-for="report in reportTypes" :key="report.key">
        <a-card hoverable class="report-card">
          <template #cover>
            <div class="card-cover">
              <component :is="report.icon" style="font-size: 48px; color: #1890ff;" />
            </div>
          </template>
          <a-card-meta :title="report.title" :description="report.description" />
          <div class="card-actions">
            <a-button type="primary" block>查看报表</a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  AreaChartOutlined,
  DotChartOutlined,
  FundOutlined,
} from '@ant-design/icons-vue'

const reportTypes = ref([
  {
    key: 'sales',
    title: '销售报表',
    description: '销售额、订单量等销售数据分析',
    icon: BarChartOutlined
  },
  {
    key: 'profit',
    title: '利润报表',
    description: '毛利率、净利润等盈利能力分析',
    icon: LineChartOutlined
  },
  {
    key: 'product',
    title: '商品报表',
    description: '商品销量、库存周转等商品分析',
    icon: PieChartOutlined
  },
  {
    key: 'customer',
    title: '客户报表',
    description: '客户消费行为、客户价值分析',
    icon: AreaChartOutlined
  },
  {
    key: 'promotion',
    title: '促销报表',
    description: '促销活动效果、ROI分析',
    icon: DotChartOutlined
  },
  {
    key: 'trend',
    title: '趋势报表',
    description: '业务趋势、预测分析',
    icon: FundOutlined
  }
])
</script>

<style scoped>
.reports {
  padding: 24px;
}

.card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: #f5f5f5;
}

.report-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.report-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>